<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>易掌店</title>
				<link rel="stylesheet" type="text/css" href="../../styles/vip/zyl会员——供应商——增加供应商.css"/>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="../../assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../../assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="../../assets/icon/style.css" />

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="../../assets/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="../../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
		<link rel="stylesheet" href="../../assets/css/ace-part2.min.css" class="ace-main-stylesheet"/>
		<![endif]-->
		<link rel="stylesheet" href="../../assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="../../assets/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		<link rel="stylesheet" href="../../assets/css/ace-ie.min.css"/>
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="../../assets/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="../../assets/js/html5shiv.min.js"></script>
		<script src="../../assets/js/respond.min.js"></script>
		<![endif]-->

		<link rel="stylesheet" href="../../styles/index/index.css">
		
		<!--崔天宇始-->
		<link rel="stylesheet" type="text/css" href="../../assets/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../assets/css/ace.min.css"/>
		<link rel="stylesheet" href="../../assets/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!--崔天宇终-->
		
		
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			/*tongzhi*/
			#zGtongZhi {
				width: 100%;
				height:44px;
				background: #3cbced;
				margin-top:12px;
				border-radius: 1px;
				display: none;
			}
			#zGtongZhi span {
				font-family: "微软雅黑";
				line-height: 44px;
				color: white;
			}
			#zGtongZhi a {
				float: right;
				padding-right: 20px;
				line-height: 44px;
				font-size: 18px;
				color: white;
				cursor: pointer;
			}
			/*tab*/
			#zGForm {
				width:100%;
				position: relative;
				top:10px;
			}
			#zGliTab {
				margin-left:70%;
				top: 660px;
				position: absolute;
			}
			#zGliTab li:hover{
				background: #c8c8c8;
			}
			
			
			
			.ctytab{
				width: 100%;height: 100%;
				position: absolute;
				display: none;

				
			}
			
			.ctyad_vip{
				width: 160px;
				height: 40px;
				background: #3abdeb;
				margin-top: 10px;
				margin-bottom:10px;
				font-size:18px;
				text-align: center;
				line-height: 40px;
				color: #FFFFFF;
				float: left;
				cursor:pointer;
			}
			.cty_bg img{
				float: right;margin-top: 10px;margin-right:18px;
			}
		.ctyad_vip span{
				margin-right: 6px;
			}
			#ctysimple-table{
		width:100%;
		font-size: 16px;
	}
	#ctysimple-table th{
		height:40px;
		
		color: #565b61;
		text-align: center;
		border: none !important;
		background:#76d4f6;
	}
#ctysimple-table tr {
	border: none !important;
}
#ctysimple-table td {
	border: none !important;
}
	.ico{
		margin-left:40px;
		margin-right: 50px;
	}
	#ctysimple-table td{
	border-right: none;
	margin-left: 57px;
	color: #595961;
	}
	#ctysimple-table tr{
		border: none;
		background: #FFFFFF;
		margin-left: 57px;
		height: 60px;
		line-height: 60px;
	}
	
	#ctysimple-table .tr td{
		height: 60px;
		line-height: 60px;
		text-align: center;
		
	}
	#ctysimple-table .trtow td{
		height: 60px;
		line-height: 60px;
		text-align: center;
		
	}	
		#ctysimple-table tr:hover{
			background: #c7f1ff;
		}
	
	.ctycenter .pos-rel{
		margin-left: 57px;
	}
	.ctyxiala{
	padding-left: 20px;
	color:#a9a7b4;
	padding-top:10px;
	padding-bottom: 10px;
	background: #FFFFFF;
	}
	#zGBtn {
			width: 118px;
			height:40px;
			background:#3cbced;
			margin-left:270px;
			cursor: pointer;
			font-size: 18px;
			color:white;
			border-radius: 4px;
			margin-top: 46px;
			outline: none;
		}
		.tan {
			text-align:center;
			margin-left:400px;
			
		}
		</style>
	</head>

	<body class="no-skin">
		<div id="navbar" class="navbar navbar-default ace-save-state">
			<div class="navbar-container ace-save-state" id="navbar-container">
				<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
					<span class="sr-only">Toggle sidebar</span>

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>

					<span class="icon-bar"></span>
				</button>

				<div class="navbar-header pull-left">
					<a href="../../index.html" class="navbar-brand">
						<i class="fa fa-shopping-bag nav-height64"></i>
						<small class="nav-header-large-label">易掌店</small> <small class="nav-header-small-label">小门店 大生意</small>
					</a>
				</div>

				<div class="navbar-buttons navbar-header pull-right" role="navigation">
					<ul class="nav ace-nav padding-tb10">
						<li class="transparent nav-height64 no-border">
							<a href="#">
								<i class="ace-icon glyphicon glyphicon-repeat nav-height64"></i>
							</a>
						</li>

						<li class="transparent nav-height64 no-border">
							<a href="#">
								<i class="ace-icon fa fa-envelope icon-animated-bell nav-height64"></i>
								<span class="badge badge-pink">8</span>
							</a>
						</li>

						<li class="transparent nav-height64 no-border">
							<a href="#">
								<i class="ace-icon glyphicon glyphicon-user nav-height64"></i>
							</a>
						</li>

						<li class="transparent nav-height64 no-border">
							<a href="#">
								<i class="ace-icon fa fa-circle-o-notch nav-height64"></i>
							</a>
						</li>
					</ul>
				</div>
			</div><!-- /.navbar-container -->
		</div>

		<div class="main-container ace-save-state" id="main-container">
			<script type="text/javascript">
				try{ace.settings.loadState('main-container')}catch(e){}
			</script>

			<div id="sidebar" class="sidebar responsive ace-save-state">
				<script type="text/javascript">
					try{ace.settings.loadState('sidebar')}catch(e){}
				</script>

				<div class="nav-aside padding-left5">
					<div class="nav-aside-header">
						<a href="#" class="pull-left font-size20">
							<i class="fa fa-home"></i>
						</a>
						<span>2016年12月01日 星期六</span>
						<a href="#" class="pull-right font-size18 sidebar-collapse">
							<i class="fa fa-navicon"></i>
						</a>
					</div>
					<div class="row-with-shop-icon">
						<div class="icon-left"></div>
						<div class="content-right">
							<h2>易掌便利店</h2>
							<p><i class="icomoon-The-shop-assistant"></i><em>张亮</em><i class="icomoon-male"></i></p>
							<p><i class="icomoon-view"></i><time>2016-11-17 12:00</time></p>
							<div class="yzd-button">交班</div>
						</div>
					</div>
					<div class="nav-aside-menus">
						<ol class="yzd-left-menu-bg-row">
							<li>
								<div class="yzd-bg-wraper">
									<i class="icomoon-money"></i>
								</div>
								<div class="container-fluid menu-container">
									<div class="row one-col">
										<div>收银</div>
									</div>
									<div class="row two-col">
										<div class="col-xs-6 left-col">支出</div>
										<div class="col-xs-6 right-col">
											<p>应收</p>
											<p>应付</p>
										</div>
									</div>									
								</div>								
							</li>
							<li>
								<div class="yzd-bg-wraper">
									<i class="icomoon-car"></i>
								</div>
								<div class="container-fluid menu-container">
									<div class="row one-col">
										<div class="col-xs-12">收银</div>
									</div>
									<div class="row two-col">
										<div class="col-xs-6 left-col">支出</div>
										<div class="col-xs-6 right-col">
											<p>应收</p>
											<p>应付</p>
										</div>
									</div>									
								</div>
							</li>
							<li>
								<div class="yzd-bg-wraper">
									<i class="icomoon-People"></i>
								</div>
								<div class="container-fluid menu-container">
									<div class="row one-col">
										<div class="col-xs-12">收银</div>
									</div>
									<div class="row two-col">
										<div class="col-xs-6 left-col">支出</div>
										<div class="col-xs-6 right-col">
											<p>应收</p>
											<p>应付</p>
										</div>
									</div>									
								</div>
							</li>
							<li>
								<div class="yzd-bg-wraper">
									<i class="icomoon-shop"></i>
								</div>
								<div class="container-fluid menu-container">
									<div class="row one-col">
										<div class="col-xs-12">收银</div>
									</div>
									<div class="row two-col">
										<div class="col-xs-6 left-col">支出</div>
										<div class="col-xs-6 right-col">
											<p>应收</p>
											<p>应付</p>
										</div>
									</div>									
								</div>
							</li>
						</ol>
					</div>
					<div class="nav-aside-menus">
						<div class="row-with-show-calendar">
							<span class="yzd-high-light-label">店庆日</span>
							<time class="ydz-shop-time">2月20日 星期日</time>
							<span class="ydz-shop-calendar">
								<i class="icomoon-editor"></i>
								<span class="ringing-bell"><span class="ringing-bell-badge">9</span><span class="icomoon-bell"></span></span>
							</span>
						</div>
					</div>
					<div class="row-with-balance">
						<div class="row-balance-left">
							<h2 class="balance-amount">88828.99</h2>
							<p class="balance-label">本月支出</p>
						</div>
						<div class="row-balance-right raise-arrow"></div>
					</div>
					<div class="help-btns">
						<span class="help-center">
							帮助中心
						</span>
						<span class="icomoon-radio"></span>
						<span class="icomoon-teasing"></span>
						<span class="icomoon-mysterious"></span>
					</div>
					<div class="shop-radio">
						<i class="icomoon-radio"></i>
						<span class="shop-radio-content">今天店里销量最好的商品是</span>
					</div>
					<div class="nav-aside-footer"></div>
				</div>
			</div>

			<div class="main-content">
				<div class="main-content-inner" id="recent-box">

					<div class="breadcrumbs ace-save-state breadcrumbs-fixed" id="breadcrumbs">
						<div class="widget-header transparent no-padding-left">
							<a class="pull-left icon-arrow-right" id="moreTab">
								<i class="ace-icon fa fa-angle-left bigger"></i>
							</a>
							<div class="widget-toolbar no-border pull-left no-padding-left">
								<ul class="nav nav-tabs" id="recent-tab">
									<li class="active">
										<a data-toggle="tab" href="#tab-index">首页</a>
									</li>
									<li>
										<a data-toggle="tab" href="#tab-settings">设置</a>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<div class="page-content">
						<div class="widget-body">
							<div class="widget-main no-padding">
								<div class="tab-content no-padding" id="tab-content">
									<div id="tab-index" class="tab-pane active">
								<!--tongzhi-->
									<div id="zGtongZhi">
									<a>不在提醒</a>
									<span style="padding-left: 20px;font-size: 20px;">系统通知：</span> 
									<span>在这里可以新增店员</span>
									</div>
									<div style="clear: both;"></div>
								
								
								
	
								
								
								
								
								
								
								
								
								
									<!--form-->
									<div id="zGForm">
										 <div class="ctytab" style="display: block;">
                                        
                                        <div class="advip">
                                        <div class="ctyad_vip"><span>+</span>增加店员</div>
                                       <div class="cty_bg">

                                     <img src="../../images/vip/shezhi.png"/>
                                       <img src="../../images/vip/zhibiao.png"/>
                                       </div>
                                        
                                        <table id="ctysimple-table" class="table  table-bordered table-hover">
											<thead>
												<tr>
													<th class="center">
														<label class="pos-rel">
															<input type="checkbox" class="ace">
															<span class="lbl"></span>
														</label>
													</th>
													<th class="ico">
									<i class="ace-icon glyphicon glyphicon-trash" style="color: #feffff;"></i> 
													</th>
													<th>
												
														供应商ID
													</th>
													<th>供应商名称</th>
													<th>联系人</th>
													<th>联系电话</th>

													<th>地址</th>
														
													
													<th>备注</th>

													<th>操作</th>
												</tr>
											</thead>

											<tbody>
												<tr class="tr">
													<td class="center">
														<label class="pos-rel">
															<input type="checkbox" class="ace">
															<span class="lbl"></span>
														</label>
													</td>
													<td>
								
													</td>

													<td>
													12345678
													</td>

													<td>
														张三食品
													</td>
													<td>张三</td>
													<td>15033456258</td>
													<td>2016-11-17-12:00:00</td>

													<td>
													备注信息
													</td>
													<td>
													<i class="ace-icon fa fa-pencil-square-o"></i>
													</td>

													
													
												</tr>
												
													<tr class="trtow">
													<td class="center">
														<label class="pos-rel">
															<input type="checkbox" class="ace">
															<span class="lbl"></span>
														</label>
													</td>
									
								<td>
									<i class="ace-icon glyphicon glyphicon-trash" style="color: #5ac6ec;"></i>
									</td>
								<td>12345678</td>	
								<td>张三食品</td>
								<td>张三</td>
								<td>15033456258</td>
								<td>2016-11-17-12:00:00</td>

								<td>
								备注信息
								</td>
								<td>
								<i class="ace-icon fa fa-pencil-square-o" style="color: #5ac6ec;"></i>
								</td>

								</tr>	
													
								<tr class="tr">
								<td class="center">
									<label class="pos-rel">
										<input type="checkbox" class="ace">
											<span class="lbl"></span>
											</label>
											</td>
								<td>
									
								</td>

								<td>
								12345678
								</td>

								<td>
								张三食品
								</td>
								<td>张三</td>
								<td>15033456258</td>
								<td>2016-11-17-12:00:00</td>

								<td>
								备注信息
								</td>
								<td>
								<i class="ace-icon fa fa-pencil-square-o"></i>
								</td>

								</tr>	
													
								<tr class="tr">
								<td class="center">
										<label class="pos-rel">
											<input type="checkbox" class="ace">
										<span class="lbl"></span>
												</label>
													</td>
								<td>
								
								</td>

								<td>
								12345678
								</td>

								<td>
								张三食品
								</td>
								<td>张三</td>
								<td>15033456258</td>
								<td>2016-11-17-12:00:00</td>

								<td>
								备注信息
								</td>
								<td>
								<i class="ace-icon fa fa-pencil-square-o"></i>
								</td>
								</tr>	
													
						<tr class="tr">
							<td class="center">
											<label class="pos-rel">
												<input type="checkbox" class="ace">
													<span class="lbl"></span>
													</label>
													</td>
								<td>
								
								</td>

								<td>
								12345678
								</td>

								<td>
								张三食品
								</td>
								<td>张三</td>
								<td>15033456258</td>
								<td>2016-11-17-12:00:00</td>

								<td>
								备注信息
								</td>
								<td>
								<i class="ace-icon fa fa-pencil-square-o"></i>
								</td>
								</tr>							
											
												
                            <tr class="tr">
								<td class="center">
											<label class="pos-rel">
												<input type="checkbox" class="ace">
													<span class="lbl"></span>
													</label>
													</td>
								<td>
								
								</td>

								<td>
								12345678
								</td>

								<td>
								张三食品
								</td>
								<td>张三</td>
								<td>15033456258</td>
								<td>2016-11-17-12:00:00</td>

								<td>
								备注信息
								</td>
								<td>
								<i class="ace-icon fa fa-pencil-square-o"></i>
								</td>
								</tr>           	
                                       			
                                       	
                                <tr class="tr">
								<td class="center">
											<label class="pos-rel">
													<input type="checkbox" class="ace">
													<span class="lbl"></span>
													</label>
													</td>
								<td>
								
								</td>

								<td>
								12345678
								</td>

								<td>
								张三食品
								</td>
								<td>张三</td>
								<td>15033456258</td>
								<td>2016-11-17-12:00:00</td>

								<td>
								备注信息
								</td>
								<td>
								<i class="ace-icon fa fa-pencil-square-o"></i>
								</td>
								
								</tr>       	 
                                </table> 
                                        
                       <div class="ctyxiala" style="margin-top: 20px;">
								共三页，每页显示<select><option>10</option><option>20</option><option>50</option><select>
							</div>	

                                        </div>
							
							
                                        
                                        
                                      <div class="ctytab">
                                      	
                                      	<div class="zylcontent">
									<div class="zylinput">
										<div style="width: 200px;height: 200px;background: #506575;color: white;line-height: 200px;font-size: 2em;border-radius: 5px;display: none;"class="tan">保存成功！</div>
										　<span id="zylspan">
										<i class="icomoon-set-up"></i>

									</span><span>*</span>供应商ID：<input type="text" placeholder="请输入供应商ID" class="zyltext"/><br />
										<span>*</span>供应商名称：<input type="text"  placeholder="请输入供应商名称" class="zyltext"/><br />
										　　<span>*</span>联系人：<input type="text"  placeholder="请输入联系人名" class="zyltext"/><br />
										&nbsp;&nbsp;&nbsp;&nbsp;<span>*</span>联系电话：<input type="text"  placeholder="请输入联系人的联系电话" class="zyltext"/><br />
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>*</span>地址：
										<select> 
											                    <option>请输入省</option>
										                   </select>  
										                   
										                   <select style="width: 191px;height: 35px;">
											                    <option>请输入市</option>
										                   </select>
										                   <select style="width: 191px;height: 35px;">
											                    <option>请输入区/县</option>
										                   </select><br />
										&nbsp;&nbsp;&nbsp;<span>*</span>店员角色：<select><option >收银员</option></select><br />
										&nbsp;&nbsp;&nbsp;&nbsp;店员权限：<input type="text" class="zyltext" style="margin-left: -1px;margin-left: 25px;"/> 
									</div>	
									<input type="submit"class="zylbutton_one"value="保存">
									<button id="zGBtn">保存并新增</button>
										
									
										
									</div>
                                      	
                                      	
                                      	
                                      	
                                      	
                                      	
                                      	
                                      </div>   
							
							
									</div>
									
								<!--li tab-->		
								<div id="zGliTab" style="display: block">
												<ul class="pagination">
												<li class="disabled">
													<a href="#">
														<i class="ace-icon fa fa-chevron-left" ></i>
													</a>
												</li>
												<li style="border:1px #e7e7e7 solid">
													<a href="#" style="background:white;color: dodgerblue; border: none;">1</a>
												</li>

												<li>
													<a href="#">2</a>
												</li>

												<li>
													<a href="#">3</a>
												</li>

												<li>
													<a href="#">...</a>
												</li>

												<li>
													<a href="#">10</a>
												</li>
												
												<li>
													<a href="#">
														<i class="ace-icon fa fa-chevron-right"></i>
													</a>
												</li>
											</ul>
										</div>		
										
										
										
										
										
										
										
										
									</div>
								</div>
							</div><!-- /.widget-main -->
						</div><!-- /.widget-body -->
					</div>
				</div>
			</div><!-- /.main-content -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="../../assets/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
			<script src="../../assets/js/jquery-1.11.3.min.js"></script>
			<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='../../assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="../../assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->

		<!--[if lte IE 8]>
			<script src="../../assets/js/excanvas.min.js"></script>
			<![endif]-->
		<script src="../../assets/js/jquery-ui.custom.min.js"></script>
		<script src="../../assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="../../assets/js/jquery.easypiechart.min.js"></script>
		<script src="../../assets/js/jquery.sparkline.index.min.js"></script>
		<script src="../../assets/js/jquery.flot.min.js"></script>
		<script src="../../assets/js/jquery.flot.pie.min.js"></script>
		<script src="../../assets/js/jquery.flot.resize.min.js"></script>
		<script src="../../assets/js/bootbox.min.js"></script>

		<!-- ace scripts -->
		<script src="../../assets/js/ace-elements.min.js"></script>
		<script src="../../assets/js/ace.min.js"></script>
		<script src="../../scripts/index/tabControl.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			var tabCtrl = new TabControl('#recent-tab','#tab-content');

			jQuery(function($) {
				$('.menu-container .row>div').on('click',function(){
					tabCtrl.add({
						title: $(this).text(),
						name: 'this-is-id-'+ $(this).text(),
//						url: "xxx.html",
						content:''+
							'<input type="text"/>'+
							'<button class="tab-reload">刷新tab</button>'+
							'<button class="tab-close">删除tab</button>',
						onLoadSuccess: function(tab){
							$('.tab-reload').on('click',function(){
								tabCtrl.reload(tab);
							});

							$('.tab-close').on('click',function(){
								tabCtrl.close(tab);
							});
						}
					});
				});

				bootbox.setDefaults({
					locale:'cn',
					animate:true,
					className:'yzd-dialog'
				});

				$('.help-center').on('click',function(){
					bootbox.alert({ 
					  size: "small",
					  title: "Your Title",
					  message: "Your message here…", 
					  callback: function(){ /* your callback code */ }
					});
				});
				
				
				
				//tongzhi
				
				$('#zGtongZhi a').on({
					mouseenter:function () {$(this).css('color','red')},
					mouseleave:function () {$(this).css('color','white')},
					click:function () {$(this).parent('#zGtongZhi').slideUp('3000')}
				});
				var zGtime = 99 * 20;
				$('#zGtongZhi').show(zGtime);
				//form
				$('#zGliTab>ul li').click(function () {
					$('#zGForm .ctytab').eq($(this).index()).stop().slideDown('2000').siblings('div').hide();
					$('#zGliTab').show();
				});
				$('#zGliTab>ul li:eq(1)').click(function () {
					$('#zGliTab').hide()
				});
//				$('#ZgBtn').click(function () {
//					$('.tan').show();
//				};
//				$('.zGNav-one>ul li').click(function () {
//					$('#zGForm div').eq($(this).index()).stop().show().siblings('div').hide();
//				});
				$('#zGBtn').click(function () {
					$('.tan').show();
					$('.tan').slideUp(zGtime);
				})
		});
		</script>
	</body>
</html>
